import React, {Fragment} from "react";
import { Card, Row, Col, Divider } from 'antd';
const { Meta } = Card;

interface Menu{
    label: string;
    value: string;
    imageUrl?: string;
    children?: Menu[];
}

export interface MenuGroupProps{
    menus: Menu[];
    onMenuClick?: (value: string) => void;
}

const gutter = 5;

export const MenuGroup: React.FC<MenuGroupProps> = ({menus, onMenuClick}) => {

    return menus.map(({ label, value, children}) => <Fragment key={value}>
        <Divider style={{margin: 5}} orientation="left">{label}</Divider>
        <Row gutter={gutter}>
            {children.map(({label, value, imageUrl}) =><Col key={value} span={6} style={{marginBottom: gutter}}>
                <Card
                    hoverable
                    cover={<img
                        alt="example"
                        src={imageUrl}
                        style={{ height: 80}}
                    />}
                    bodyStyle={{padding: 5}}
                    onClick={() => onMenuClick(value)}
                >
                    <Meta description={label} />
                </Card>
            </Col>)}
        </Row>
    </Fragment>)
}


